<template>
  <div ref="progress" class="progress">4564565</div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ProgressCharts",
  mounted() {
    let myCharts = echarts.init(this.$refs.progress);
    let option = {
      xAxis: {
        show:false,
        //设置最小数值
        min: 0,
        max: 100,
      },
      yAxis: {
          type: "category",
          show:false,
      },
      series: {
        type: "bar",
        data: [70],
        barWidth: 10,
        label: {
          show: true,
          position: "right",
          //图文标签内容
          formatter: "|",
        },
      },
      //展示背景颜色
      showBackground: true,
      //调试背景颜色
      backgroundStyle: {
        color: "#eee",
      },
      grid: {
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
      },
    };
    myCharts.setOption(option);
    window.onresize = function(){
      myCharts.resize()
    }
  },
};
</script>

<style>
.progress {
  width: 100%;
  height: 100%;
}
</style>